<template>
  <page-header-wrapper>
     <a-card :bordered="false" class="card_top_padding" style="margin-bottom: 11px">
      <a-tabs @change="(val)=>{$router.push({name:val})}" activeKey="MchCommotCat">
        <a-tab-pane key="MchList" tab="商户列表"> </a-tab-pane>
        <a-tab-pane key="MchApply" tab="入驻审核"> </a-tab-pane>
        <a-tab-pane key="MchCommotCat" tab="所售类目"> </a-tab-pane>
        <a-tab-pane key="MchGoods" tab="入驻商品"> </a-tab-pane>
        <a-tab-pane key="MchOrder" tab="入驻订单"> </a-tab-pane>
        <a-tab-pane key="MchCashList" tab="提现申请"> </a-tab-pane>
      </a-tabs>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="20">
            <a-col :md="4" :sm="24">
              <a-input-search style="width: 100%" v-model="queryParams.keyWords" placeholder="请填写商品名称" />
            </a-col>
            <a-col :md="6" :sm="24">
              <span class="table-page-search-submitButtons" style="margin-bottom: 0">
                <a-button style="margin-right: 8px" @click="() => (this.queryParams = {})">重置</a-button>
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card style="margin-top: 11px"  class="card_style_re" :bordered="false">
      <div class="table-operator" style="float: right">
        <a-button type="primary" @click="onEdit({})" icon="plus"> 新建 </a-button>
      </div>
      <a-divider />
      <s-table ref="tableList" size="default" row-key="id" :columns="columns" :data="loadData">
        <template slot="name" slot-scope="name">
          <a-row>
            <a-space style="font-weight: bold">
              {{ name }}
            </a-space>
          </a-row>
        </template>
        <a-space slot="action" slot-scope="text, cat">
          <a @click="onEdit(cat)">编辑</a>
          <a-divider type="vertical"></a-divider>
          <a @click="onDelete(cat.id)">删除</a>
        </a-space>
      </s-table>
    </a-card>
    <a-modal title="类目编辑" :footer="null" :width="700" @cancel="onClose" :destroyOnClose="true" v-model="visible">
      <template>
        <a-form action="" method="post" @submit="onSave" :form="form">
          <a-form-item :hidden="true">
            <a-input v-decorator="['id']" type="number" :step="1" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="类目名称" hasFeedback>
            <a-input
              placeholder="填写类目名称"
              v-decorator="['name', { rules: [{ required: true, message: '填写类目名称' }] }]"
              type="text"
              :step="1"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序" hasFeedback>
            <a-input
              placeholder="填写排序"
              v-decorator="['sort', { rules: [{ required: true, message: '填写排序' }] }]"
              type="number"
              :step="1"
            />
          </a-form-item>
          <a-form-item :gutter="[16, 30]" type="flex" align="middle">
              <a-button type="primary" html-type="submit"> 保存 </a-button>
          </a-form-item>
        </a-form>
      </template>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { list, del, save } from '@/api/mch/commonCat'
import { STable } from '@/components'
import pick from 'lodash.pick'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '名称',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '排序',
    dataIndex: 'sort',
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' },
  },
]

export default {
  name: 'MchCommotCat',
  components: {
    STable,
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      columns: columns,
      visible: false,
      form: this.$form.createForm(this),
      catInfo: {},
      queryParams: {},
      loadData: (parameter) => {
        return list({ parameter, ...this.queryParams }).then((res) => {
          return res.data
        })
      },
    }
  },
  activated() {
    this.$refs.tableList.$data.localDataSource = []
    this.$refs.tableList.refresh(false)
  },
  created() {},
  methods: {
    refresh(row) {
      this.$nextTick(() => {
        this.$refs.tableList.refresh(true)
      })
    },
    onEdit(cat) {
      this.visible = true
      this.catInfo = cat
      this.updateData()
    },
    /**
     * 渲染form表单
     */
    updateData() {
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.catInfo, ['id', 'sort', 'name']))
      })
    },
    onClose() {
      this.visible = false
      this.catInfo = {}
    },
    onSave(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$message.loading({ content: '提交中', key: 'updatable' })
          save(values).then((res) => {
            if (res.code === 0) {
              this.$message.success({ content: res.msg, key: 'updatable' })
              this.$nextTick(() => {
                this.refresh()
                this.visible = false
              })
            } else {
              this.$message.error({ content: res.msg, key: 'updatable' })
            }
          })
        } else {
          for (const key in err) {
            this.$message.error(err[key].errors[0].message)
          }
        }
      })
    },
    onDelete(id) {
      this.$confirm({
        title: '是否确认删除？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          const hide = this.$message.loading('删除中...')
          del({ id: id }).then((res) => {
            hide()
            if (res.code === 0) {
              this.refresh()
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
        },
      })
    },
  },
}
</script>
<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.search-item {
  margin-left: 10px;
}
</style>
